<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>管理用户账号页面</title>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">

    <style>
        .table-responsive {
            width: 100%;
        }
    </style>
  </head>
  <body>
    <div class="table-responsive">
      <div id="allusers">
        <table class="table">
          <h3 style="text-align:center;">帖子管理列表</h3>

          <tr>
            <th>标题</th>
            <th>标签</th>
            <th>作者</th>
            <th>创建时间</th>
            <th>是否公开</th>
            <th>是否存在</th>
            <th>操作</th>
          </tr>

          <tr v-for="(post,i) in posts">
            <td>
              <a href="">{{post.title}}</a>
            </td>
            <td>
              <span v-for="(tag,index) in post.tags">
                {{tag.name}}
                <span v-text="index==post.tags.length-1?'':'、'"></span>
              </span>
            </td>
            <td>
              <a href="">{{post.username}}</a>
            </td>
            <td>{{post.createtime}}</td>
            <td v-text="post.publicStatus==0?'公开':'不公开'"></td>
            <td v-text="post.deleteStatus==0?'存在':'已删除'"></td>
            <td>
              <a @click="deletePost(post.id,i)">删除</a>
            </td>
          </tr>

        </table>
      </div>
    </div>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!--引入vue框架-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!--引入axios框架-->
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <script>
        let post_vm = new Vue({
            el: "#allusers",
            data: {
                posts: [],
            },
            methods: {
                loadposts: function () {
                    axios({
                        url: "/boke/admin/showAllPosts",
                        method: "get"
                    }).then(function (r) {
                        console.log(r.data)
                        console.log("帖子:" + r.data.tags)
                        post_vm.posts = r.data;

                    })
                },
                deletePost:function (id, i) {
                    axios({
                        url: "/boke/admin/showAllPosts/deletePost/"+id,
                        method: "get"
                    }).then(function (r) {

                    })
                }
            },
            created: function () {
                this.loadposts();
            }
        })
    </script>
  </body>
</html>